<template>
  <a-page-header>
    <a-card title="管理员修改用户密码">
      <a-form-model ref="ruleForm" :model="ruleForm" :rules="rules" v-bind="layout">
        <a-form-model-item label="用户标识" prop="userId">
          <a-select
              show-search
              placeholder="请选择需要修改密码的用户"
              option-filter-prop="children"
              style="width:100%"
              :filter-option="filterOption"
              v-model="ruleForm.userId"
          >
            <template v-for="u in data">
              <a-select-option :value="u.userId" :key="u.userId">
                {{u.username}}({{u.userId}})
              </a-select-option>
            </template>

          </a-select>
        </a-form-model-item>

        <a-form-model-item  label="管理员密码" prop="adminPass">
          <a-input-password v-model="ruleForm.adminPass"  />
        </a-form-model-item>

        <a-form-model-item label="用户新密码" prop="pass">
          <a-input-password v-model="ruleForm.pass" />
        </a-form-model-item>

        <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button type="primary" @click="submitForm('ruleForm')">
            修改
          </a-button>
          <a-button style="margin-left: 10px" @click="resetForm('ruleForm')">
            重置
          </a-button>
        </a-form-model-item>
      </a-form-model>
    </a-card>
  </a-page-header>
</template>

<script>
import {getAllUserList,adminUpdatePassword} from "@/api/user";

export default {
  name: "UpdatePassword",
  mounted() {
    // TODO 查询后续需要修改为只查询角色中没有管理员的用户
    this.getUserList()
  },
  data() {
    let checkUserId = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请选择要修改的用户'));
      }else if(typeof (this.ruleForm.userId)!=='undefined'&&this.ruleForm.userId!==''){
        callback();
      }else {
        return callback(new Error('请选择要修改的用户'));
      }
    }
    return {
      data: [],
      ruleForm: {
        pass: '',
        adminPass: '',
        userId: undefined,
      },
      rules: {
        pass: [{ required:true, trigger: 'blur',message:'请输入用户的新密码' }],
        adminPass: [{ required:true, trigger: 'blur',message:'请输入管理员的密码' }],
        userId: [{ validator: checkUserId, trigger: ['blur','change']}],
      },
      layout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 6 },
      },
    };
  },
  methods: {
    getUserList(params = {}){
      console.log(params)
      this.loading = true
      getAllUserList().then(res=>{
        this.data = res.data
      }).catch(err=>{
        console.log("SystemUserPassword:fetch"+err.message)
      }).finally(()=>{
        this.loading = false
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let submitData = {
            userId:this.ruleForm.userId,
            adminPassword:this.ruleForm.adminPass,
            password:this.ruleForm.pass
          }
          adminUpdatePassword(submitData).then(res=>{
            this.$notification['success']({
              message: '成功',
              description: `${res.data}`,
              duration: 4
            })
            this.resetForm(formName)
          })

        } else {
          this.$notification['error']({
            message: '失败',
            description: `表单验证不通过`,
            duration: 4
          })
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    filterOption(input, option) {
      return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
  },
};
</script>

<style scoped>

</style>
